<template>
  <aside class="aside">
  	<div class="tools">
      <template v-for="(tls,i) in tools">
        <span v-if="tls.type && tls.type == 'separate'" class="separate" :key="i"></span>
        <div v-else
          class="tool" :title="(tls.title || lang[tls.key])"
            @mousedown="choiceNode($event, tls.key, (tls.title || lang[tls.key]))"
            :key="tls.key"
            >
            <b :class="tls.icon"></b>
        </div>
      </template>
  	</div>
    <div class="shadow" v-show="shadow.show" :style="shadow.style">
      <div class="tool" :title="shadow.title"><b :class="shadow.icon"></b></div>
    </div>
  </aside>
</template>

<script>
  import language from './js/lang/smtflow.i18n.zh-cn'
  import flow from './js/flow'
  export default {
    name: 'FlowAside',
    props: ['tools'],
    data() {
      return {
        lang: language.tool,
        shadow: {
          show: false,
          title: '',
          icon: '',
          style: {}
        }
      }
    },
    methods: {
      choiceNode(e, type, title) {
        let halfSize = 24;
        let scrollTop = document.documentElement.scrollTop;
        let scrollLeft = document.documentElement.scrollLeft;
        let dx = e.pageX - halfSize - scrollLeft;
        let dy = e.pageY - halfSize - scrollTop;
        let style = {left: dx + 'px', top: dy + 'px'};
        let icon = 'ico_' + type;
        this.shadow = {show: true, title, icon, style}
        let $v = this;
        let $w = window;
        $w.onmousemove = function(me) {
        	let mx = me.clientX;
        	let my = me.clientY;
        	$v.shadow.style = {left: (mx - halfSize) + 'px', top: (my - halfSize) + 'px'};
        }
        $w.onmouseup = function(ue) {
					let x = ue.clientX;
					let y = ue.clientY;
          let id = flow.$getId('N');
          flow.$icon(require(`./css/icons/tool-${type}.svg`), (image) => {
            $v.$flow.$emit('addNode', {title, type, image, id, cls:[], showRemove: false}, {x, y});
          })
          
          //$v.$flow.$emit('addNode', {title, type, image: require('./css/icons/tool-' + type + '.svg'), id, cls:['focus'], showRemove: false}, {x, y});
          $v.shadow.show = false;
          $w.onmousemove = null;
          $w.onmouseup = null;
        }
      }
    }
  }
</script>

<style scoped>
    .aside {
      width: 64px;
      border: #b7c8d7 1px solid;
      margin-top: 6px;
      margin-left: 5px;
      border-radius: 3px;
      position: relative;
      z-index: 1;
      background-color: #d2e1f0;
      box-sizing: border-box;
      min-height: 200px;
    }
    div.tools {
      border: #e9f4fa 1px solid;
      border-radius: 3px;
    }
    div.tools > div.tool {
      border: 1px #d2e1f0 solid;
      margin: 6px auto;
    }
    div.tools > span.separate {
      display: block;
      height: 0px;
      width: 40px;
      border-top: #9ac6ff 1px solid;
      border-bottom: #fff 1px solid;
      margin: 0 auto;
    }

    div.shadow {
    	background: #d9e8fb;
    	border: 1px dashed #8ea4c1;
    	cursor: move;
    	width: 48px;
    	height: 48px;
    	position: fixed;
    	z-index: 1000;
    	box-sizing: border-box;
    	opacity: 0.6;
    	border-radius: 20%;
    }
    div.shadow > div.tool {
    	margin: 3px;
    }    
    div.tools > div.tool,
    div.shadow > div.tool {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
    }
    div.tools > div.tool > b,
    div.shadow > div.tool > b{	
      width: 38px;
      height: 38px;
      background-size: 36px 36px
    }
    div.tools > div:hover {
      border-radius: 2px;
      cursor: pointer;
      border: #8b7654 1px solid;
      background-color: #e3ea8f;
    }
    div.tools > div.tool > b,
    div.shadow > div.tool > b {
      display: inline-block;
      border: 0;
      background-repeat: no-repeat;
      background-position: center;
    }
</style>
